<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ERP系统 - 供应商管理</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>ERP系统 - 供应商管理</h1>
        </header>
        
        <nav>
            <ul>
                <li><a href="index.html">采购订单管理</a></li>
                <li><a href="#">供应商列表</a></li>
                <li><a href="#create-supplier">创建供应商</a></li>
                <li><a href="#search-supplier">查询供应商</a></li>
            </ul>
        </nav>
        
        <main>
            <section id="supplier-list">
                <h2>供应商列表</h2>
                <div class="toolbar">
                    <button id="refresh-btn">刷新</button>
                </div>
                <table id="suppliers-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>供应商编码</th>
                            <th>供应商名称</th>
                            <th>联系人</th>
                            <th>联系电话</th>
                            <th>地址</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 供应商数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </section>
            
            <section id="create-supplier" class="hidden">
                <h2>创建供应商</h2>
                <form id="create-supplier-form">
                    <div class="form-group">
                        <label for="supplier-code">供应商编码:</label>
                        <input type="text" id="supplier-code" name="supplierCode" required>
                    </div>
                    <div class="form-group">
                        <label for="supplier-name">供应商名称:</label>
                        <input type="text" id="supplier-name" name="supplierName" required>
                    </div>
                    <div class="form-group">
                        <label for="contact-person">联系人:</label>
                        <input type="text" id="contact-person" name="contactPerson" required>
                    </div>
                    <div class="form-group">
                        <label for="contact-phone">联系电话:</label>
                        <input type="text" id="contact-phone" name="contactPhone" required>
                    </div>
                    <div class="form-group">
                        <label for="address">地址:</label>
                        <input type="text" id="address" name="address" required>
                    </div>
                    <div class="form-group">
                        <label for="supplier-status">状态:</label>
                        <select id="supplier-status" name="status" required>
                            <option value="ACTIVE">启用</option>
                            <option value="INACTIVE">禁用</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="supplier-remark">备注:</label>
                        <textarea id="supplier-remark" name="remark"></textarea>
                    </div>
                    <button type="submit">创建供应商</button>
                </form>
            </section>
            
            <section id="edit-supplier" class="hidden">
                <h2>编辑供应商</h2>
                <form id="edit-supplier-form">
                    <input type="hidden" id="edit-supplier-id" name="id">
                    <div class="form-group">
                        <label for="edit-supplier-code">供应商编码:</label>
                        <input type="text" id="edit-supplier-code" name="supplierCode" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-supplier-name">供应商名称:</label>
                        <input type="text" id="edit-supplier-name" name="supplierName" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-contact-person">联系人:</label>
                        <input type="text" id="edit-contact-person" name="contactPerson" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-contact-phone">联系电话:</label>
                        <input type="text" id="edit-contact-phone" name="contactPhone" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-address">地址:</label>
                        <input type="text" id="edit-address" name="address" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-supplier-status">状态:</label>
                        <select id="edit-supplier-status" name="status" required>
                            <option value="ACTIVE">启用</option>
                            <option value="INACTIVE">禁用</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit-supplier-remark">备注:</label>
                        <textarea id="edit-supplier-remark" name="remark"></textarea>
                    </div>
                    <button type="submit">更新供应商</button>
                    <button type="button" id="cancel-edit">取消</button>
                </form>
            </section>
            
            <section id="search-supplier" class="hidden">
                <h2>查询供应商</h2>
                <div class="search-form">
                    <div class="form-group">
                        <label for="search-id">供应商ID:</label>
                        <input type="number" id="search-id" name="searchId">
                        <button id="search-by-id-btn">查询</button>
                    </div>
                    <div class="form-group">
                        <label for="search-code">供应商编码:</label>
                        <input type="text" id="search-code" name="searchCode">
                        <button id="search-by-code-btn">查询</button>
                    </div>
                    <div class="form-group">
                        <label for="search-status">按状态查询:</label>
                        <select id="search-status" name="searchStatus">
                            <option value="">全部</option>
                            <option value="ACTIVE">启用</option>
                            <option value="INACTIVE">禁用</option>
                        </select>
                        <button id="search-by-status-btn">查询</button>
                    </div>
                </div>
            </section>
            
            <section id="supplier-details" class="hidden">
                <h2>供应商详情</h2>
                <div class="supplier-info">
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="info-label">ID:</span>
                            <span id="detail-id"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">供应商编码:</span>
                            <span id="detail-supplier-code"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">供应商名称:</span>
                            <span id="detail-supplier-name"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">联系人:</span>
                            <span id="detail-contact-person"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">联系电话:</span>
                            <span id="detail-contact-phone"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">地址:</span>
                            <span id="detail-address"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">状态:</span>
                            <span id="detail-status"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">创建时间:</span>
                            <span id="detail-created-time"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">更新时间:</span>
                            <span id="detail-updated-time"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">备注:</span>
                            <span id="detail-remark"></span>
                        </div>
                    </div>
                    <div class="supplier-actions">
                        <button id="edit-supplier-btn" class="btn btn-primary">编辑</button>
                        <button id="enable-supplier-btn" class="btn btn-success">启用</button>
                        <button id="disable-supplier-btn" class="btn btn-warning">禁用</button>
                        <button id="delete-supplier-btn" class="btn btn-danger">删除</button>
                        <button id="back-btn" class="btn">返回</button>
                    </div>
                </div>
            </section>
        </main>
    </div>
    
    <script src="js/supplier.js"></script>
</body>
</html>